<template>
    <div class='PAERecord'>
        <div class='sectionBox' ref="sectionBox">
            <div class="box">
                <el-form>
                    <el-select v-model = 'currentTask' @change = 'getCurrentTaskState'>
                        <el-option label='术后随访（当前33%）' value='current'></el-option>
                    </el-select>
                    <div class="currentTaskState">{{currentTaskState}}</div>
                </el-form>
                <div style='text-align: right;'>
                    <el-button type="primary" @click='createTaskFlag = true'>新建随访任务</el-button>
                </div>
            </div>
            <h2>
                <span>随访任务</span>
            </h2>
            <div class="box">
                <complex-table
                  :hasSelection=false
                  :hasOperate = false
                  :list='list1'
                  :theadList='theadList1'
                  :operationButtons='operationButtons'
                  @initListQuery = 'initListQuery'>
                </complex-table>
            </div>
            <h2>
                <span>随访记录</span>
            </h2>
            <div class="box">
                <complex-table
                  :hasSelection=false
                  :hasOperate = false
                  :list='list2'
                  :theadList='theadList2'
                  :operationButtons='operationButtons'
                  @initListQuery = 'initListQuery'>
                </complex-table>
            </div>
        </div>
        <el-dialog title="新建随访任务" :visible.sync="createTaskFlag">
            <el-form :model="followTask" :label-width="formLabelWidth" ref='followTask'>
                <el-form-item label="随访计划">
                    <el-date-picker type="date" placeholder="选择日期" v-model='followTask.followTime' value-format="yyyy-MM-dd" style='width: 196px;'></el-date-picker>
                </el-form-item>
                <el-form-item label="随访计划">
                    <el-select v-model="followTask.region" placeholder="请选择" style='width: 196px;'>
                        <el-option label="特殊患者随访计划" value="shanghai"></el-option>
                        <el-option label="普通患者随访计划" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单分类">
                    <el-select v-model="followTask.region" placeholder="请选择" style='width: 196px;'>
                        <el-option label="特殊随访表" value="shanghai"></el-option>
                        <el-option label="普通随访表" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="随访表单">
                    <el-select v-model="followTask.region" placeholder="请选择" style='width: 196px;'>
                        <el-option label="特殊随访表" value="shanghai"></el-option>
                        <el-option label="普通随访表" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="回访方式">
                    <el-select v-model="followTask.region" placeholder="请选择" style='width: 196px;'>
                        <el-option label="电话" value="shanghai"></el-option>
                        <el-option label="短信" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="有效天数">
                    <el-input v-model="followTask.name" style='width: 196px;'></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createTaskFlag = false">取 消</el-button>
                <el-button type="primary" @click="createFollowTask">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import complexTable from '@/views/table/complexTable'
import { followRecord } from '@/api/followupManage/index.js'
export default {
  components: { complexTable },
  data() {
    return {
      formLabelWidth: '120px',
      createTaskFlag: false,
      currentTask: '',
      currentTaskState: '',
      followTask: {},
      appointment: {
        num: 'Y234231029431',
        applicant: 'admin',
        expectTime: '2018-09-06',
        operatorTime1: '2018-12-12',
        status: '随访'
      },
      list1: [],
      theadList1: [
        {
          label: 'planTime',
          text: '计划随访时间'
        },
        {
          label: 'planUserName',
          text: '计划随访人'
        },
        {
          label: 'formName',
          text: '随访模板'
        },
        {
          label: 'followupTypeShow',
          text: '随访类型'
        }
      ],
      list2: [],
      theadList2: [
        {
          label: 'execTime',
          text: '随访时间'
        },
        {
          label: 'execUserName',
          text: '随访人'
        },
        {
          label: 'formName',
          text: '随访模板'
        },
        {
          label: 'followupTypeShow',
          text: '随访类型'
        },
        {
          label: 'followupResultShow',
          text: '随访结论'
        }
      ],
      operationButtons: [],
      filter: {
        limit: '',
        page: ''
      },
      filter2: {
        limit: '',
        page: ''
      }
    }
  },
  mounted() {
    const CH = document.body.offsetHeight
    this.$refs.sectionBox.style.height = CH - 165 + 'px'
    console.log('随访信息')
    console.log(this.$route.params.id)
    followRecord({ appointId: this.$route.params.id }).then(res => {
      this.list1 = res.data.unFinishFollowups
      this.list2 = res.data.finishFollowups
    })
  },
  methods: {
    initListQuery(listQuery) {
      this.filter.limit = listQuery.limit
      this.filter.page = listQuery.page
      this.filter2.limit = listQuery.limit
      this.filter2.page = listQuery.page
    },
    createFollowTask() {
      this.createTaskFlag = false
    },
    getCurrentTaskState() {
      this.currentTaskState = '通过ajax 拿到的该随访的状态'
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../styles/case.scss";
.currentTaskState{
    padding: 20px;
}
</style>



